<template>
	<div style="margin-top: 10px;">
		<div class="va"></div>
		<van-row gutter="10">
			<van-col span="8" style="min-height: 300px;background-color: #fff;">
				<van-cell
v-for="(item,index) in list"
:title="item.cateName"
:key="index"
					@click="navclick(item.id,index)"
:class="{ active:index==isActive }" />
			</van-col>
			<van-col span="15" style="min-height: 300px;background-color: #fff;margin-left:4px;">
				<van-grid :column-num="3" class="classify" :border="false">
					<template v-for="(item,index) in data" v-if="data.length>0">
						<van-grid-item :to="'/ProductList?sid='+item.id">
							<van-image :src="imgUrls+item.pic" round />
							<span>
								<font size="2" color="">{{item.cateName}}</font>
							</span>
						</van-grid-item>
					</template>
				</van-grid>
			</van-col>
		</van-row>
	</div>
</template>

<script>
import {
  getData
} from '@/api/productClassify.js'
export default {
  data() {
    return {
      activeIds: 1,
      style: null,
      list: [],
      isActive: false,
      active: 0,
      data: [],
      imgUrls: this.$baseApi
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getData().then(res => {
        this.list = res.data
        this.navclick(this.list[0].id)
      })
    },
    // 获取右侧选中的商品的数据
    getItem(data) {
      this.$router.push({
        name: 'ProductList',
        query: {
          sid: data.id
        }
      })
    },
    navclick(data, index) {
      this.isActive = index
      const list = []
      this.list.forEach(r => {
        r.children.forEach(res => {
          if (res.pid == data) {
            list.push(res)
          }
        })
      })
      this.data = list
    }

  }
}
</script>

<style scoped>
	.va {
		background-color: #ffffff;
		height: 92%;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;

	}

	.active /deep/ .van-cell__title span {
		padding-left: 5px;
		border-left: 4px solid #ff6634;

	}
</style>
